{% extends "base.html" %}
{% block head %}
    <!--该boolstrap版本定义了但有bug-->
    <style>
        .disabled{
        pointer-events:none;
        }
    </style>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">

{% endblock %}
{% block title %}
    首页
{% endblock %}
{% block body %}
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul class=flashes>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <div class="row" style="margin-top: 20px;">
        <div class="col"></div>
        <div class="col-10">
            <ul class="question-ul">
               {% for question in paginate.items%}<!--questions-->

                    <li>
                        <div class="side-question">
                            <img class="side-question-avatar" src="{{ url_for('static',filename='images/avatar.jpg') }}"
                                 alt="">
                        </div>
                        <div class="question-main">
                            <div class="question-title"><a
                                    href="{{ url_for('qa.qa_detail',qa_id=question.id) }}">{{ question.title }}</a>
                            </div>
                            <div class="question-content">{{ question.content }}</div>
                            <div class="question-detail">
                                <span class="question-author">{{ question.author.username }}</span><!--原question.username-->
                                <span class="question-time">{{ question.create_time }}</span>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="col"></div>
    </div>

    <!--加分页-->
    <nav aria-label="Page navigation">
        <ul class="pagination"><!--会调用boolstrap？-->
            <li {% if not paginate.has_prev %} class="disabled" {%endif%}>
                <a href="/?page={{paginate.prev_num}}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            {%for num in range(1,paginate.pages+1) %}
            <li {%if num==paginate.page %} class="active" {%endif%}>
                <a href="/?page={{num}}">{{num}}</a>
            </li>
            {%endfor%}

<!--            <li class="active"><a href="/?page=1">1</a></li>-->
<!--            <li><a href="/?page=2">2</a></li>-->
            <li {% if not paginate.has_next %} class="disabled" {%endif%}>
                <a href="/?page={{paginate.next_num}}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
{% endblock %}